<div class="right-column" id="dataScreen">
  <div class="Settings-div">
    <router-outlet></router-outlet>
    <div fxLayout="row">
      <h1 class="title" fxFlex="90">Settings</h1>
      <span fxFlex="10" fxLayoutAlign="end">
        <button
          mat-icon-button
          matTooltip="This functionality is not yet implemented."
        >
          <mat-icon>add</mat-icon>
        </button>
      </span>
    </div>
    <div>
      <mat-form-field appearance="standard">
        <mat-label>Filter</mat-label>
        <input
          matInput
          (keyup)="applyFilter($event)"
          placeholder="Ex. auto_migrate_settings"
          #input
        />
      </mat-form-field>

      <table mat-table [dataSource]="data" class="mat-elevation-z8">
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
          <td mat-cell *matCellDef="let element">{{ element.name }}</td>
        </ng-container>

        <!-- Value Column -->
        <ng-container matColumnDef="value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
          <td mat-cell *matCellDef="let element">
            <!-- View -->
            <code
              *ngIf="element.type === 'string' || element.type === 'number'"
              class="settings-values"
            >
              "{{ element.value }}"
            </code>

            <!-- View - Boolean -->
            <mat-slide-toggle
              *ngIf="element.type === 'boolean'"
              [checked]="element.value"
              disabled="true"
            >
            </mat-slide-toggle>

            <!-- View Array-->
            <mat-list role="list" *ngIf="isArray(element.value)">
              <mat-list-item *ngFor="let c of element.value; let index = index">
                {{ c }}
              </mat-list-item>
            </mat-list>

            <!-- View - Object -->
            <app-viewable-tree
              *ngIf="element.type === 'object' && !isArray(element.value)"
              [inputObject]="element.value"
            ></app-viewable-tree>
          </td>
        </ng-container>

        <!-- Edit Actions -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let element">
            <div style="display: flex; justify-content: flex-end">
              <button
                mat-icon-button
                matTooltip="This functionality is not yet implemented."
              >
                <mat-icon>edit</mat-icon>
              </button>
              <button
                style=""
                mat-icon-button
                matTooltip="This functionality is not yet implemented."
              >
                <mat-icon>clear_all</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">
            No data matching the filter "{{ input.value }}"
          </td>
        </tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 25, 100]"
        aria-label="Select page of users"
      ></mat-paginator>
    </div>
  </div>
</div>
